<template>
  <app-container
    title="DrySister"
    lefttext="返回"
    righttext="按钮"
    @click-right="onClickRight"
  >
    <!-- <div class="container">
      <div v-for="(item, index) in images" :key="index" class="column">
        <img :src="item" />
      </div>
    </div> -->
    <van-pull-refresh
      v-model="refreshing"
      success-text="刷新成功"
      @refresh="onRefresh"
    >
      <!-- <div class="container"> -->
      <van-list
        class="container"
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div v-for="(item, index) in images" :key="index" class="column">
          <van-image lazy :src="item.url" />
        </div>
      </van-list>

      <!-- </div> -->
    </van-pull-refresh>
  </app-container>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import AppContainer from '@/components/AppContainer/index.vue'
import { getMoveList, getImage, getGirls } from '@/api/move'
import { Notify } from 'vant'
export default defineComponent({
  name: 'DrySister',
  components: { AppContainer },
  setup() {
    const loading = ref(false)
    const finished = ref(false)
    const refreshing = ref(false)
    const count = ref(0)
    const pageNo = ref(1)
    const images = ref([])
    const onLoad = () => {
      if (refreshing.value) {
        images.value = []
        refreshing.value = false
      }
      pageNo.value++
      getGirls(pageNo.value).then((res: any) => {
        const { data = [] } = res
        images.value = data
        loading.value = false
        finished.value = true
      })
    }

    const onRefresh = () => {
      pageNo.value = 1
      finished.value = false
      loading.value = true
      onLoad()
    }
    const onClickRight = () => {
      Notify({ type: 'primary', message: '右侧按钮' })
    }
    return {
      onClickRight,
      images,
      onRefresh,
      count,
      onLoad,
      loading,
      finished,
      refreshing
    }
  }
})
</script>
<style lang="scss" scoped>
.van-pull-refresh {
  min-height: 100vh;
}
.container {
  column-count: 3;
  column-width: 33%;
  column-gap: 2;
  .column {
    border: 1px solid red;
    margin: 2px;
    img {
      width: 100%;
    }
  }
}
</style>
